<template>
  <a-card style="margin: 0 auto; width: 70%; margin-top: 50px">
    <div class="img-box">
      <img :src="require('@/assets/login.jpg')" />
    </div>
    <div class="tab-box">
      <a-tabs v-model:activeKey="activeKey" centered>
        <a-tab-pane key="1" tab="登录">
          <LoginForm />
        </a-tab-pane>
        <a-tab-pane key="2" tab="注册" force-render
          ><RegisterForm />
        </a-tab-pane>
      </a-tabs>
    </div>
  </a-card>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue';
import LoginForm from './components/LoginForm.vue';
import RegisterForm from './components/RegisterForm.vue';

export default defineComponent({
  components: {
    LoginForm,
    RegisterForm
  },
  setup() {
    onMounted(() => {
      document.onscroll = (e) => {};
    });

    return {
      activeKey: ref('1')
    };
  }
});
</script>

<style scoped lang="less">
@media screen and (max-width: 800px) {
  .img-box {
    display: none;
  }
}

@media screen and (min-width: 800px) {
  .tab-box {
    display: inline-block;
    vertical-align: top;
    // text-align: center;
    width: 60%;
  }
  .img-box {
    display: inline-block;
    vertical-align: top;
    width: 40%;
    img {
      width: 95%;
      height: 420px;
    }
  }
}
</style>
